<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery/jquery-3.3.1.min.js"></script>
    <!--核心代码-->
    <link rel="stylesheet" href="Editer/css/codemirror.css"/>
    <script src="Editer/js/codemirror.js"></script>
    <!--textarea部分-->
    <link rel="stylesheet" href="Editer/css/textarea.css">
    <script src="Editer/js/jquery-ui.1.12.1.js"></script>
    <!--shell高亮-->
    <script src="Editer/js/mode/shell/shell.js"></script>
    <!--引入css文件，用以支持主题-->
    <link rel="stylesheet" href="Editer/css/theme/seti.css">
    <!--支持代码折叠-->
    <link rel="stylesheet" href="Editer/addon/fold/foldgutter.css"/>
    <script src="Editer/addon/fold/foldcode.js"></script>
    <script src="Editer/addon/fold/foldgutter.js"></script>
    <script src="Editer/addon/fold/brace-fold.js"></script>
    <script src="Editer/addon/fold/comment-fold.js"></script>
    <!--括号匹配-->
    <script src="Editer/addon/edit/matchbrackets.js"></script>
    <!--自动补全-->
    <link rel="stylesheet" href="Editer/addon/hint/show-hint.css">
    <script src="Editer/addon/hint/show-hint.js"></script>
    <script src="Editer/addon/hint/anyword-hint.js"></script>
    <!--提示框-->
    <script type="text/javascript" src="zTree/layer/layer.js"></script>
    <link rel="stylesheet" href="zTree/layer/theme/default/layer.css">
    <title>ssh客户端</title>
    <style>
        .CodeMirror {
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            line-height: 1.3;
            height: 500px
        }
        .CodeMirror-linenumbers {
            padding: 0 8px;
        }
        .code{
             position: absolute;
             left:10%;
             top:50px;
             width: 80%;
             border: 1px solid #000000;
         }
    </style>
</head>
<body>
<div class="code">
    <textarea title="code" class="form-control" id="code" name="code"></textarea>
</div>
<script>
    //根据DOM元素的id构造出一个编辑器
    var myTextArea=document.getElementById("code");
    var editor = CodeMirror.fromTextArea(myTextArea, {
        //实现Shell代码高亮
        mode: "shell",
        //显示行号
        lineNumbers: true,
        //设置主题
        theme:"seti",
        //代码折叠
        lineWrapping: true,
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        //括号匹配
        matchBrackets:true,
        //智能提示
        extraKeys:{"Tab":"autocomplete"}//ctrl-space唤起智能提示
    });

    //?os=ubuntu&id=0bf01ccf-fc3f-4ea2-b00c-b91621ae878a
    var url=location.search;
    var pos = url.indexOf("?os=");
    var instance_id=url.substring(pos+4);
    pos = instance_id.indexOf("&id=");
    var os = instance_id.substring(0,pos);
    instance_id=instance_id.substring(pos+4);
    connectHost(os,instance_id);
    function connectHost(os,instance_id) {
        $.ajax({
            url: "instance/getPasswordAndIp",
            type: "POST",
            data:{
                instance_id:instance_id
            },
            dataType: "json",
            success: function(data) {
                var key;
                if(os==="cirros"){
                    key =os+":"+"cubswin:)"+"@"+data.address;
                }else {
                    key = os+":"+data.password+"@"+data.address;
                }
                webSocketSet(key);
            }
        });
    }
    function webSocketSet(key) {
        var lastCursorPos=0;
        var lastChPos=0;
        var currentCursorPos=0;
        var currentChPos=0;
        var wsPath = "ws://59.69.101.206:30480/cloud";
        var webSocket = new WebSocket(wsPath + '/ssh/'+ key);
        webSocket.onerror = function (event) {
        };
        webSocket.onopen = function (event) {
            console.log("open");
        };
        webSocket.onmessage = function (event) {

            editor.setCursor(editor.lineCount());
            editor.replaceSelection(event.data);
            lastCursorPos = editor.lastLine();
            lastChPos = editor.getLine(lastCursorPos).length;
        };
        $(document).keydown(function(event){//不区分大小写
            var command;
            switch (event.keyCode){
                case 13:{//Enter
                    currentCursorPos = editor.lastLine();
                    currentChPos = editor.getLine(currentCursorPos).length;
                    command = editor.getRange({line:lastCursorPos,ch:lastChPos},{line:currentCursorPos,ch:currentChPos})
                    webSocket.send(command);
                }break;
                case 8:{//backspace
                    var pos = editor.getCursor();
                    if(pos.line<=lastCursorPos&&pos.ch<lastChPos){
                        editor.undoSelection();//防止之前的文本被删除
                    }
                }
            }

        });
//        var command="";
//        $(document).keydown(function(event){//不区分大小写
//            switch (event.keyCode){
//                case 13: {
//                    webSocket.send(command);
//                    command="";
//                }break;
//                case 8:{
//                    command=command.substring(0,command.length-1);
//                }break;
//            }
//        });
//        document.onkeypress=function(event){//无法识别功能键
//            command+=(String.fromCharCode(event.keyCode));
//        };
    }
</script>
</body>
<script type="text/javascript" src="javascript/myString.js"></script>
</html>